<template>
  <div>
    <!-- 搜索 -->
    <div class="seaerch-bg p10">
      <div class="seaerch-box">
        <i></i>
        <input type="text" placeholder="请输入产品名称" />
      </div>
    </div>
    <!-- banner -->
    <div class="swiper-banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../../assets/images/ban01.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../../assets/images/ban01.jpg" alt />
        </div>
        <div class="swiper-slide">
          <img src="../../assets/images/ban01.jpg" alt />
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- index-icon -->
    <div class="index-icon-bg p10 bt10">
      <ul class="box">
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon4.jpg" alt srcset />
          </div>
          <p>热销</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon3.jpg" alt srcset />
          </div>
          <p>地标</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon2.jpg" alt srcset />
          </div>
          <p>绿色</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon3.jpg" alt srcset />
          </div>
          <p>溯源</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon0.jpg" alt srcset />
          </div>
          <p>新人红包</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon7.jpg" alt srcset />
          </div>
          <p>邀请好友</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon6.jpg" alt srcset />
          </div>
          <p>预存有礼</p>
        </li>
        <li>
          <div class="icon-bg">
            <img src="../../assets/images/index-icon5.jpg" alt srcset />
          </div>
          <p>新人福利</p>
        </li>
      </ul>
    </div>
    <!-- index-ban -->
    <div class="clearfix index-ban p10 bt10">
      <div class="wid">
        <div class="fl">
          <div class="img-box">
            <img src="../../assets/images/index-img2.jpg" alt srcset />
          </div>
        </div>
        <div class="fr">
          <div class="img-box">
            <img src="../../assets/images/index-img1.jpg" alt srcset />
          </div>
          <div class="img-box">
            <img src="../../assets/images/index-img0.jpg" alt srcset />
          </div>
        </div>
      </div>
    </div>
    <!-- 首页小图 -->
    <div class="img-box bt10">
      <img src="../../assets/images/index-img3.jpg" alt srcset />
    </div>
    <!-- 选项卡菜单 -->
    <div class="tab-bg">
      <ul class="tab-box">
        <li>
          <p>热销</p>
        </li>
        <li>
          <p>地标</p>
        </li>
        <li>
          <p>绿色</p>
        </li>
        <li>
          <p>溯源</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
export default {
  data() {
    return {};
  },
  mounted() {
    new Swiper(".swiper-banner", {
      pagination: {
        el: ".swiper-pagination",
        type: "fraction"
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  }
};
</script>
<style lang="scss">
</style>